<template>
    <el-form :model="formData" :inline="true" label-width="120px">
        <el-form-item label="供应商">
            <el-select v-model="formData.vendorId" placeholder="Select">
                <el-option v-for="item in vendorData" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
        </el-form-item>

        <el-form-item label="日期">
            <el-date-picker v-model="formData.poDate" type="date" placeholder="请选择日期" />
        </el-form-item>

        <el-form-item label="总价">
            <el-input v-model="formData.totalPrice" disabled>
                <template #prepend>￥</template>
            </el-input>

        </el-form-item>

        <el-form-item label="备注" style="width: 100%;">
            <el-input v-model:modelValue="formData.brief" type="textarea" />
        </el-form-item>


    </el-form>
    <PickProduct v-model:plist="productList"></PickProduct>

    <el-table :data="store1.tempPoItem" style="width: 100%" ref="productTableRef">

        <el-table-column fixed prop="productId" label="ID" width="80" />
        <el-table-column fixed prop="productName" label="名称" width="200" />
        <el-table-column prop="productImg" label="图片" width="120">
            <template #default="scope">
                <el-avatar shape="square" :size="50" fit="fit" :src="scope.row.productImg.split(',')[0]" />
            </template>
        </el-table-column>

        <el-table-column prop="price" label="单价" width="150">
            <template #default="scope">
                <el-input-number v-model="scope.row.price" @change="change(scope)" size="small" :precision="2" :step="0.1"
                    :min="0" />
            </template>
        </el-table-column>


        <el-table-column prop="qty" label="数量" width="150">
            <template #default="scope">
                <el-input-number v-model="scope.row.qty" @change="change(scope)" size="small" :step="1" :min="1" />
            </template>
        </el-table-column>

        <el-table-column prop="rowTotalPrice" label="合计" width="80">
            <template #default="scope">
                ￥{{ scope.row.rowTotalPrice }}
            </template>
        </el-table-column>

        <el-table-column prop="brief" label="备注" width="150">
            <template #default="scope">
                <el-input v-model="scope.row.brief" />
            </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="100">
            <template #default="scope">
                <el-button type="danger" size="small" @click="deleteProduct(scope)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-button type="primary" @click="addPo">保存</el-button>
</template>
<script setup lang="ts">
import { ElMessage, dayjs } from 'element-plus'
import { ref, reactive, onMounted, watch } from "vue"
import { vendorApi, poApi } from "@/api";
import { Calendar, Money } from '@element-plus/icons-vue'
import PickProduct from '@/components/PickProduct.vue';
import useStore1 from '@/store/store1';
const store1 = useStore1()
const formData = reactive({
    vendorId: 0,
    poDate: dayjs().format('YYYY-MM-DD'),
    totalPrice: "",
    brief: ""
})
const change = (scope: any) => {
    let index = scope.$index;
    let currProduct = store1.tempPoItem[index]
    currProduct.rowTotalPrice = Number(currProduct.qty * currProduct.price).toFixed(2)
    computeTotalPrice()
}
const computeTotalPrice = () => {
    let totalPrice = 0
    store1.tempPoItem.forEach((item) => {
        totalPrice += Number(item.rowTotalPrice)
    })
    formData.totalPrice = Number(totalPrice).toFixed(2)
}
const deleteProduct = (scope: any) => {
    let index = scope.$index
    store1.tempPoItem.splice(index, 1)
    computeTotalPrice()
}

const vendorData = ref([])

const productList = ref([])
watch(() => productList.value, (newV, oldV) => {
    // console.log(newV);

    newV.forEach((item: any) => {
        let exsitProduct = store1.tempPoItem.filter(p => p.productId === item.id)
        if (exsitProduct.length == 0) {
            store1.tempPoItem.push({
                productId: item.id,
                productName: item.name,
                productImg: item.img,
                price: item.price,
                qty: 1,
                rowTotalPrice: item.price,
                brief: ""
            })
        }
    })

    computeTotalPrice()
})
onMounted(() => {
    callVendorApi()
    // computeTotalPrice()
})

const callVendorApi = () => {
    vendorApi.select.call().then((res) => {
        vendorData.value = res
        formData.vendorId = res[0].id
    })
}
const addPo = () => {
    let vendor: any = vendorData.value.filter(p => p.id === formData.vendorId)
    let po = {

        vendorId: formData.vendorId,
        vendorName: vendor[0].name,
        poDate: formData.poDate,
        totalPrice: formData.totalPrice,
        brief: formData.brief,
        items: store1.tempPoItem
    }

    console.log(po);


    poApi.insert.call(po).then(res => {
        console.log(res);
        ElMessage.success("采购单创建成功")
        // store1.tempPoItem = []
        // 成功之后需要把它清掉
    })
}


</script>